<template>
       <el-main>
           <div class="title">
               <el-badge is-dot="" class="item">系统消息 </el-badge>
           </div>
           <div class="messagebox">
               <div class="box">
                <el-row class="message" :key="pro" v-for="pro in pros">
                  <h4>{{ pro.ptitle }}</h4>
                  <h5 class="time">{{ pro.ptime }}</h5>
                  <p>{{ pro.pcontent }}</p>
                </el-row>
               </div>
           </div>
       </el-main>

</template>
<script>
export default {
    data(){
        return{
            pros: [
        {
          ptime: "2022-03-23",
          ptitle: "审核通过提醒",
          pcontent: "您上传的作品已通过审核",
        },
         {
          ptime: "2022-03-23",
          ptitle: "交易成功提醒",
          pcontent: "您已成功购买作品",
        },
         {
          ptime: "2022-03-23",
          ptitle: "审核未通过提醒",
          pcontent: "您上传的作品未能通过审核，请重新提交",
        },

      ],
        }
    },
    methods:{
    
  }
};
</script>
<style scoped>
.el-main {
  background-color: rgb(255, 255, 255);
  text-align: center;
  /*line-height: 360px;*/
  padding: 0px 0px 10px 0px;
  position: relative;
  margin-top: 75px;
  height: 100%;
}
.title{
    font-size: 18px;
    font-weight: 600;
    text-align: left;
    margin-left: 50px;
    margin-top:15px;
}
.messagebox
{
    background: rgb(245, 245, 245);
    position: relative;
    height: 100%;
    margin-top: 10px;
}
.box{
    position: relative;
    top:5%;
}
.message{
    background: rgb(255, 255, 255);
    margin-top:20px;
    width: 70%;
    left: 10%;
    border-radius: 10px;
    text-align: left;
    padding-left: 20px;
    padding-bottom: 20px;
}  
.time{
  position: absolute;
  right: 30px;
  top:0;
  color: rgb(133, 133, 133);
}
</style>